<template>
    <div class="list">
        <!-- 头部搜索 -->
        <Row>
            <Col :xs="24">
            <div class="margin-up-down">
                    <Button type="info" @click="add" >
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    </Button>
                </div>
                <div class="margin-up-down">
                    <Input
                        v-model.trim="params.uId"
                        placeholder="请输入版本号进行查询"
                        style="width: 200px;"
                        clearable
                    />
                </div>
                <div class="margin-up-down">
                    <Button type="primary" icon="ios-search" @click="search"></Button>
                </div>
            </Col>
        </Row>           
        <!-- 列表 -->
        <div class="table">
            <Table size="small" :columns="columns1" :data="data1" stripe></Table>
        </div>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            params: {
                uId: ""
            },
            pageNo: 1,
            pageSize: 10,
            count: 10,
            columns1: [
                { title: "排序", key: "sum", align: "center", width: 60,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title: "版本ID",
                    key: "versionId",
                    align: "center",
                    // width: 180
                },
                {
                    title: "版本名",
                    key: "versionName",
                    align: "center",
                    // width: 140
                },
                {
                    title: "版本号",
                    key: "versionNum",
                    align: "center",
                    // width: 140
                },
                { 
                    title: "类型", 
                key: "type1", 
                    align: "center", 
                    // width: 180 
                },
                {
                    title: "下载路径",
                    key: "downloadPath",
                    align: "center",
                    // width: 180
                },
                {
                    title: "版本内容",
                    key: "content",
                    align: "center",
                    // width: 220
                },
                {
                    title: "设置",
                    key: "iOperate",
                    align: "center",
                    width: 120,
                   // fixed: 'right',
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            // function全局方法
                                            this.functionJS.queryNavgationTo(
                                                this,
                                                "/index/configuration/versionManagement/edit",
                                                {
                                                    pageNo: this.pageNo,
                                                    id
                                                }
                                            );
                                        }
                                    }
                                },
                                "编辑"
                            )
                        ];
                    }
                }
            ],
            data1: []
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/versionManagement/list",
                title: "版本管理中心"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo;
        if (Boolean(pageNo)) {
            this.pageNo = Number(pageNo);
        }
        this.loadingData(this.pageNo);
    },
    methods: {
        loadPage(index) {
            this.pageNo = index;
            if (this.params.uId) {
                this.loadingData(this.pageNo, this.params.uId);
            } else {
                this.loadingData(this.pageNo);
            }
        },
        search() {
            this.pageNo = 1
            this.loadingData(1,this.params.uId);
        },
        loadingData(pageNo, val) {
            let params = {
                pageNo,
                pageSize: this.pageSize
            };
            if (Boolean(val)) {
                params.searchKey = val.trim();
            }
            this.$axios.post(api.findVersionList, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    this.count = ret.total;
                    if(ret.records){
                        ret.records.forEach((item, index) => {
                            item.sum = this.addZeros(index);
                            if (item.type == 1) {
                                item.type1 = "IOS";
                            } else {
                                item.type1 = "安卓";
                            }
                        });
                        this.data1 = ret.records;
                    } else {
                        this.data1 = []
                    }
                } else {
                    this.$Message.info("没有访问权限");
                }
            });
        },
        add() {
            // function全局方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/versionManagement/add",
                {
                    pageNo: this.pageNo
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.list {
    width: 100%;
    padding: 10px;
    background: #fff;
    box-sizing: border-box;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .page {
        margin-top: 20px;
        text-align: center;
    }
    
}
</style>
